<template>
    <div class="boxContentCss">
        <el-form ref="form" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="订单概要">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <div class="border-radius-top mainBackgroundColor width-80">
                        <el-row>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">订单编号：{{form.orderNo || '-'}}</el-col>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">客户姓名：{{form.buyerName || '-'}}</el-col>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">客户电话：{{form.buyerPhone || '-'}}</el-col>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">创建时间：{{form.createTime || '-'}}</el-col>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">核销时间：{{form.verificationTime || '-'}}</el-col>
                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">核销人员：{{form.verificationName || '-'}}</el-col>

                            <el-col :span="8" class="fontSize14 color085 marginBottom12 marginTop12">退款申请时间：{{form.refundData&&form.refundData.refundApplyTime || '-'}}</el-col>
                            <el-col v-if="form.refundData&&form.refundData.refundCheck != 2" :span="8" class="fontSize14 color085 marginBottom12 marginTop12">退款审核时间：{{form.refundData&&form.refundData.refundCheckTime || '-'}}</el-col>
                        </el-row>
                    </div>
                </div>
            </EdCreateCard>
            <EdCreateCard title="订单详情">
                <div class="zh_flex">
                    <div class="border-radius-top mainBackgroundColor width-80">
                        <el-row>
                            <el-table :data="form.items" class="table marginTop10 width-100">
                                <el-table-column v-if="$store.getters.type == 1" prop="productSource" label="来源">
                                    <template slot-scope="scope">
                                        <span>{{returnName(scope.row['productSource'], selectSource.options) || scope.row['productSource'] || '-'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="$store.getters.type == 2 || $store.getters.type == 3 || $store.getters.type == 5" prop="merchantName" label="店铺名称">
                                     <template slot-scope="scope">
                                        <span>{{ form.merchantName || '-'}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="productName" label="商品名称" :formatter="formatter"></el-table-column>
                                <el-table-column prop="" label="商品图片">
                                    <template slot-scope="scope">
                                        <!-- <div style="display: flex" v-if="scope.row.productPic&&scope.row.productPic.length>0">
                                            <el-image 
                                                v-for="item in scope.row.productPic&&scope.row.productPic"
                                                :key="item"
                                                :src="item" 
                                                style="width: 100px; height: 60px;vertical-align: text-top; display: inline-block;"
                                                :preview-src-list="scope.row.productPic">
                                            </el-image>
                                        </div> -->
                                        <div style="display: flex" v-if="scope.row.skuPic">
                                            <el-image 
                                                :key="scope.row.skuPic"
                                                :src="scope.row.skuPic" 
                                                style="width: 100px; height: 100px;vertical-align: text-top;"
                                                :preview-src-list="[scope.row.skuPic]">
                                            </el-image>
                                        </div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="moneySin" label="单价">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row['money'] && !scope.row['point']">
                                            -
                                        </div>
                                        <div v-else>
                                            <div v-if="scope.row['money'] && !scope.row['point']">{{ scope.row['money'] }}元</div>
                                            <div v-if="!scope.row['money'] && scope.row['point']">{{ scope.row['point'] }}积分</div>
                                            <div v-if="scope.row['money'] && scope.row['point']">{{ scope.row['money'] }}元+{{ scope.row['point'] }}积分</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemCount" label="数量" :formatter="formatter"></el-table-column>
                                <el-table-column prop="" label="订单金额">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row['totalMoney'] && !scope.row['totalPoint']">
                                            -
                                        </div>
                                        <div v-else>
                                            <div v-if="scope.row['totalMoney'] && !scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元</div>
                                            <div v-if="!scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalPoint'] }}积分</div>
                                            <div v-if="scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元+{{ scope.row['totalPoint'] }}积分</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="refundMoney" label="退款金额">
                                    <template slot-scope="scope">
                                        <!-- <div>{{ (scope.row['totalMoney']&&scope.row['totalMoney'] + '元') || '-'}}</div> -->
                                        <div v-if="!scope.row['totalMoney'] && !scope.row['totalPoint']">
                                            -
                                        </div>
                                        <div v-else>
                                            <div v-if="scope.row['totalMoney'] && !scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元</div>
                                            <div v-if="!scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalPoint'] }}积分</div>
                                            <div v-if="scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元+{{ scope.row['totalPoint'] }}积分</div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>

                    </div>
                </div>
            </EdCreateCard>
            <EdCreateCard title="退款审核">
                <div class="zh_flex">
                    <div class="border-radius-top mainBackgroundColor width-80">
                        <!-- <el-row>
                            <el-col :span="24" class="fontSize14 color085 marginBottom12 marginTop12">退款原因：{{form.refundMsg || '-'}}</el-col>
                            <el-col :span="24" class="fontSize14 color085 marginBottom12 marginTop12">退款凭证：
                                <el-image 
                                    v-for="item in form.refundPics&&form.refundPics"
                                    :key="item"
                                    :src="item" 
                                    style="width: 100px; height: 100px;vertical-align: text-top"
                                    :preview-src-list="form.refundPics">
                                </el-image>
                            </el-col>
                            <el-col v-if="form.refundCheck != 2"  :span="24" class="fontSize14 color085 marginBottom12 marginTop12">审核状态：
                                <el-button v-if="form['refundCheck']==0" class="ed-table-bottom ed_2_border">通过</el-button>
                                <el-button v-if="form['refundCheck']==1" class="ed-table-bottom ed_3_border">不通过</el-button>
                            </el-col>
                            <el-col v-if="form['refundCheck']==1" :span="24" class="fontSize14 color085 marginBottom12 marginTop12">不通过原因：{{form.refundCheckMsg || '-'}}</el-col>

                            <el-col :span="24" v-if="form.refundCheck==2" class="checkRadioStyle">
                                <el-form-item label="审核状态：">
                                    <el-radio-group v-model="verifyForm.radio">
                                        <el-radio v-for="item in selectRefundVerify.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="form.refundCheck==2&&verifyForm.radio==1">
                                <el-form-item label="">
                                    <el-input class="flex-input" placeholder="请输入不通过原因" v-model="verifyForm.reason"></el-input>  
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <el-row>
                            <el-col :span="24" class="fontSize14 color085 marginBottom12 marginTop12">退款原因：{{form.refundData&&form.refundData.refundMsg || '-'}}</el-col>

                            <el-col :span="24" class="fontSize14 color085 marginBottom12 marginTop12" v-if="form.refundData&&form.refundData.refundPics&&form.refundData.refundPics.length>0">退款凭证：
                                <el-image 
                                    v-for="item in form.refundData&&form.refundData.refundPics&&form.refundData.refundPics"
                                    :key="item"
                                    :src="item" 
                                    style="width: 100px; height: 100px;vertical-align: text-top"
                                    :preview-src-list="form.refundData&&form.refundData.refundPics">
                                </el-image>
                            </el-col>
                            <el-col :span="24" class="fontSize14 color085 marginBottom12 marginTop12" v-else>退款凭证：-</el-col>

                            <el-col v-if="form.refundData&&form.refundData.refundCheck != 2"  :span="24" class="fontSize14 color085 marginBottom12 marginTop12">审核状态：
                                <el-button v-if="form.refundData&&form.refundData['refundCheck']==0" class="ed-table-bottom ed_2_border">通过</el-button>
                                <el-button v-if="form.refundData&&form.refundData['refundCheck']==1" class="ed-table-bottom ed_3_border">不通过</el-button>
                            </el-col>
                            <el-col v-if="form.refundData&&form.refundData['refundCheck']==1" :span="24" class="fontSize14 color085 marginBottom12 marginTop12">不通过原因：{{form.refundData&&form.refundData.refundCheckMsg || '-'}}</el-col>

                        <el-form v-if="form.refundData&&form.refundData.refundCheck==2" ref="verify_form_ref" :model="verifyForm" label-position="right" label-width="auto">
                            <el-col :span="24"  class="checkRadioStyle">
                                <el-form-item label="审核状态">
                                    <el-radio-group v-model="verifyForm.radio">
                                        <el-radio v-for="item in selectRefundVerify.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="verifyForm.radio==1">
                                <el-form-item label="不通过原因" prop="reason" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                    <el-input class="flex-input" placeholder="请输入不通过原因" v-model="verifyForm.reason" maxlength="50"></el-input>  
                                </el-form-item>
                            </el-col>
                        </el-form>
                        </el-row>
                        <el-form-item v-if="form.refundData&&form.refundData.refundCheck==2" class="form_btns">
                            <el-button :disabled="$store.getters.type != 1 && $store.getters.type != 5" class="ed-button ed_black-bottom" @click="save('verify_form_ref')">确定</el-button>
                            <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                        </el-form-item>
                    </div>
                </div>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import {orderDetail, verifyRefund} from "./api";
    import { defineComponent } from 'vue'
    import { getDictByCode } from "src/api/dictionaries";
    import { returnName } from "src/utils/common.js";
    export default defineComponent({
        name: "OrderDetails",
        components: { EdCreateCard},
        data(){
            return{
                form:{},
                verifyForm: {
                    radio: '0',
                    reason: ''
                },
                selectRefundStatus:{  // 审核状态
                    placeholder:"请选择审核状态",
                    options: [
                        { value: '0', label: '通过' },
                        { value: '1', label: '不通过' },
                        { value: '2', label: '待审核' },
                    ]
                },
                selectRefundVerify:{  // 审核状态
                    options: [
                        { value: '0', label: '通过' },
                        { value: '1', label: '不通过' },
                        // { value: '2', label: '待审核' },
                    ]
                },
                selectSource:{
                    placeholder:"请选择来源",
                    options: []
                },
            }
        },
        activated(){
            // 来源
            getDictByCode('product_source').then(res=>{
                this.selectSource.options = res.data.items;
            });
            this.orderDetail()
        },
        deactivated(){
            this.verifyForm = {
                radio: '0',
                reason: ''
            }
            this.$refs.verify_form_ref.resetFields()
        },
        methods:{
            orderDetail(){
                orderDetail({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.form = response.data;
                        this.form.items = [].concat(response.data.items);
                    }
                })
            },
            save(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        // return
                        let params = {
                            orderNo: this.form.orderNo,
                            refundCheck: this.verifyForm.radio,
                            refundCheckMsg: this.verifyForm.reason,
                        }
                        verifyRefund(params).then(response => {
                            if(response.success == true) {
                                    this.$message.success({
                                    message: '操作成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.$utilsSet.goBack(this.$router);
                            }
                        })
                    }
                })
            },
            returnName(val, options, value, label){
                return returnName(val, options, value, label)
            },
            formatter(row, column, cellValue, index){
                return cellValue || '-'
            }
        }
    })
</script>

<style scoped lang="scss">
    .spanLabel{
        width: 8px;height: 8px;
        border-radius: 50%;
        display: inline-block;vertical-align: 1px
    }
    .spanLabelWidth{
        width: 6px;height: 6px;
    }
    :deep .checkRadioStyle{
        .el-radio-group .el-radio.is-checked{
            .el-radio__input{
                .el-radio__inner{
                    border-color: #EED096;
                    background: #EED096;
                }
            }
            .el-radio__label{
                color: #EED096;
            }
        }

        .el-radio-group .el-radio{
            .el-radio__input{
                .el-radio__inner:hover{
                    border-color: #EED096;
                }
            }
        }
    }
    :deep .table{
        border-radius: 8px 8px 0 0;
        margin-bottom: 16px;
        thead tr th {
            background: #F4F4F4;
            color: #909399;
        }

        tbody tr {
            background: #FBFBFB;
            td {
                color: #606266;
            }
        }

        tbody tr:hover td{
            /* background-color: #FEF9F0; */
            background-color: #FEF9F0 !important;
        }
    }
</style>